<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.global.js'></script>
</head>

<body>
    <div id='app'>
        <button>
            Delete a {{ item.name }}
        </button>
        <hr>

        <todo-list>
            <template v-slot:default="slotProps">
                <span class="green">{{slotProps.idx}} : {{ slotProps.todo }}</span>
            </template>
        </todo-list>
        <hr>


        <todo-list v-slot="slotProps">
            <span class="green">{{slotProps.idx}} : {{ slotProps.todo }}</span>
        </todo-list>

        <todo-list>
            <!-- <template v-slot:pointer>=></template> -->
            <!-- <template v-slot:pointer="sp">{{sp.pointer1}}</template> -->
            <!-- <template v-slot:pointer="{pointer1,pointer0}">{{pointer0}}</template> -->
            <!-- <template v-slot:pointer="{pointer1:p1,pointer0:p0}">{{p1}}</template> -->
            <!-- <template v-slot:[spname]="{pointer1:p1,pointer0:p0}">{{p1}}</template> -->
            <template #pointer="{pointer1:p1,pointer0:p0}">{{p0}}</template>

            <template v-slot:default="slotProps">
                <span class="green">{{slotProps.idx}} : {{ slotProps.todo }}</span>
            </template>

        </todo-list>
        <hr>

    </div>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    item: { name: "松哥" },
                    spname:"pointer"
                }
            }
        })

        app.component(
            "todo-list", {
            data() {
                return {
                    todos: [
                        "抽烟", "喝酒", "撸代码"
                    ],
                    pointers:[">>","~"]
                }
            },
            template: `
            <ul>
                <li v-for="( item, index ) in todos">
                    <slot name="pointer" :pointer0="pointers[0]" :pointer1="pointers[1]">&gt;</slot>
                    <slot :todo="item" :idx="index">老爸让我放啥我就放啥</slot>
                </li>
            </ul>
            `
        }
        )

        app.mount('#app')
    </script>
</body>

</html>